@use "sass:color";
@use "../../styles/lib/svg";

.search-navigation-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;

  display: flex;
  align-items: center;

  box-sizing: content-box;
  height: 44px;
  padding: 20px 10px 0;

  background-color: rgb(248 248 248 / 60%);

  text-align: center;

  backdrop-filter: blur(20px);

  @media (prefers-color-scheme: dark) {
    background-color: rgb(0 0 0 / 60%);
  }

  .search {
    padding: 6px 8px;
  }
}

.search-nav-placeholder {
  width: 100%;
  height: 44px;

  background-color: #f8f8f8;
  color: #acacb0;

  font-size: 10px;
  text-align: center;

  @media (prefers-color-scheme: dark) {
    background-color: #000;
    color: #555;
  }
}
